<template>
    <el-menu
        :style="{ width: isCollapse ? '58px' : '200px'}"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
      <p class="logo-lg" >{{isCollapse ? 'DIDI':'DIDI陪诊'}}</p>
        <TressMenu></TressMenu>
      </el-menu>
</template>

<script setup lang="ts" name="">
import TressMenu from '../treeMenu/TreeMenu.vue'
import { useCountStore } from "@/store/menu.js";
import { computed } from "vue";

const store = useCountStore();
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const isCollapse = computed(() => store.isCollapse);


</script>

<style lang="less" scoped>
/* Your CSS styles here */
.el-menu-vertical-demo {
    height: 100%;
    .logo-lg {
        font-size: 20px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color:#fff;
    }
}
</style>